import React, { useEffect, useReducer } from 'react'
import { countReducer } from '../store';
import Testpage1 from './test';
import { useNavigate } from 'react-router-dom'

const init = (initArg) => initArg - 0

const HooksPage = props => {
  const [state, dispatch] = useReducer(countReducer, '0', init) // init 第一个参数是初始值 '0'
  // const navigate = useNavigate()
  // console.log(navigate)
  // 类比3个声明周期 cdm  cdu cwu 挂载 更新 销毁前
  useEffect(()=>{
    console.log('didmont')
    return () => { // return 方法在更新effect前和销毁前会执行
      console.log('omg')
    }
  }, [state])

  return (
    <div>
      <h3>HooksPage</h3>
      <Testpage1></Testpage1>
      <button onClick={() => dispatch({type: 'ADD'})}>{state}</button>
    </div>
  )
}
export default HooksPage